<template>
  <el-container>

    <el-header>
      <BlogHeader :active-index="'1'"></BlogHeader>
    </el-header>
    <el-main class="main">
      <div class="article">
        <h1 class="ttitle">
          {{question.title}}
        </h1>
        <img v-show="this.avatar" :src="avatar" class="avatar">

        <div v-html="question.html" class="body"></div>

      </div>

      <MonacoEditor
        height="300"
        class="vs"
        style="text-align: left;background-color: white; overflow: hidden; resize: none"
        language="cpp"
        theme="vs"
        :code="code"
        :editorOptions="options"
        @mounted="onMounted"
        @codeChange="onCodeChange"
      >
      </MonacoEditor>
      <!--      // 还可添加language属性，让编辑器识别语言，例如language="sql"-->
      <!--      // 添加key是为了保证唯一值，防止第一次加载，后端请求的数据反显不到编辑器上-->
      <el-button round style="margin-top: 20px" icon="el-icon-edit" @click="onSubmit">提交</el-button>
    </el-main>



  </el-container>
</template>

<script>
import BlogHeader from "../components/BlogHeader";
import {getBlogs, postComment, postSubmit} from "../api/api";
import MonacoEditor from 'vue-monaco-editor'
export default {
  name: "QuestionDetail",
  components: {BlogHeader, MonacoEditor},

  created() {
    this.load();
  },


  data() {
    return({
      reply: '',
      question: {
        username: '',
        id: 0,
        title: '',
        html: '',
        time_limit: '',
        memory_limit: '',
        cases: 0,
        publish_date: '',
      },
      avatar: '',

      editor: null,
      code: '',
      options: {
        selectOnLineNumbers: false
      },
    })
  },

  methods: {
    load() {
      getBlogs('/api/question/' + this.$route.params.id + '/')
        .then(response => {
          console.log(response)
          this.question = response.data.data
          if(response.data.data.avatar)
            this.avatar = '/images/' + response.data.data.avatar
        })

    },

    onSubmit() {
      const token = localStorage.getItem('token')
      const id = localStorage.getItem('username') + '#' + new Date().getTime() + Math.random(100)
      postSubmit(id, this.question.id, this.question.time_limit, this.question.memory_limit,
                this.question.cases, this.editor.getValue(), token)
        .then(res => {
          alert("提交成功")
          console.log(this.username)
          this.$router.push({name: "AnswerList", params: {username: localStorage.getItem('username')}})
        })
        .catch(error => {
          alert(error.message)
        })
    },

    //代码编辑器
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      console.log(this.editor.getValue());
    },
  },



}
</script>

<style scoped>



.article {

  height: auto;
  padding: 10px;

  background-color: #ffffff;

  border: 2px solid #eee;
  border-radius: 4px;

  overflow: hidden;
}

.ttitle {
  display: block;
  font: 24px Extra large;
  margin: 30px;
}

.aauthor {
  font: 13px Small;
  float: right;
  line-height: 0.1;
}

.assist {
  color: #bdb4b7;
  font: 10px Extra Small;
}

.avatar {
  float: right;
  height: 178px;
  width: 178px;
}

.body {
  margin-left: 3rem;
  margin-right: 3rem;
}

.reply {

  padding: 10px;
  background-color: #dcdfe6;

}


</style>
